<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import {
  gethospital,
  getdoctor,
  getdoctortext,
  gethospitallist,
  getdoctorlist,
} from "@/api/home";
import type { Ref } from "vue";
import { useCounterStore } from "@/stores/counter";
const use = useCounterStore();
const router = useRouter();
const search: Ref<string> = ref("");
function searchInput() {}
function upAddress() {
  router.push("/city");
}

const index = ref(0);
const active: Ref<string[]> = ref([]);
async function fn1() {
  let res = await gethospitallist();
  active.value = res.data.data;
}

function getlist() {
  router.push("/hospital");
}

function getinfo(id: number) {
  use.gethospitalInfo(id);
  router.push("/hospitalinfo");
}

interface IActiveList {
  id: number;
  kinds: string;
  name: string;
  image: string;
  desc: string;
  position: string;
}

interface IHospitalInfo {
  kinds: string;
  grade: string;
  name: string;
  image: string;
  desc: string;
  text: string;
}
const info: Ref<IHospitalInfo[]> = ref([]);

const activelist: Ref<IActiveList[]> = ref([]);
async function fn2() {
  let res = await gethospital({
    cate: active.value[index.value],
  });
  // console.log(res.data);
  activelist.value = res.data;
  info.value = res.data;
}

const num = ref(0);
const active1: Ref<string[]> = ref([]);
async function fn3() {
  let res = await getdoctorlist();
  active1.value = res.data.data;
}
interface IDoctorInfo {
  kinds: string;
  hospital: string;
  position: string;
  name: string;
  image: string;
  desc: string;
}
const doctorInfo: Ref<IDoctorInfo[]> = ref([]);

const activelist1: Ref<IActiveList[]> = ref([]);
async function fn4() {
  let res = await getdoctor({
    catedate: active1.value[num.value],
  });
  // console.log(res.data);
  activelist1.value = res.data;
  doctorInfo.value = res.data;
}

const activelist2: Ref<IActiveList[]> = ref([]);
onMounted(async () => {
  await fn1();

  await fn2();

  await fn3();

  await fn4();

  getdoctortext().then((res) => {
    activelist2.value = res.data.data;
    // // console.log(activelist2.value);
  });
});
watch(index, async () => {
  await fn1();

  await fn2();
});
watch(num, async () => {
  await fn3();

  await fn4();
});

function getDoctorInfo(id: number) {
  use.getdoctorInfo(doctorInfo.value[0]);
  // console.log(use.doctorInfo);
  router.push("/doctor");
}

function jumpDetails(id: number) {
  use.getSayId(id);
  router.push("/saydetail");
}
</script>
<template>
  <div class="box">
    <div class="header">
      <div @click="upAddress">
        <van-icon name="location" />
        <span v-if="use.city"> {{ use.city }}</span> <span v-else>北京</span>
      </div>
      <van-search
        v-model="search"
        placeholder="请输入搜索关键词"
        @input="searchInput"
      />
      <van-icon name="chat-o" />
    </div>
    <div class="content">
      <div class="img_box" @click="$router.push('/famous')">
        <!-- <img
          src="https://img2.baidu.com/it/u=2090467411,1159845975&fm=253&fmt=auto&app=138&f=JPEG?w=868&h=500"
          alt=""
        /> -->
        <van-button>立即预约</van-button>
      </div>
      <van-tabs color="gray" v-model:active="index">
        <h5
          style="font-size: 0.18rem; margin: 0.05rem; margin-left: 0.1rem"
          @click="getlist"
        >
          查看全部
        </h5>
        <van-tab
          background="#f7fdff"
          v-for="item in active"
          :key="item"
          :title="item"
        >
          <van-grid>
            <van-grid-item
              v-for="value in activelist"
              :key="value.id"
              :icon="value.image"
              :text="value.name"
              @click="getinfo(value.id)"
            />
          </van-grid>
        </van-tab>
      </van-tabs>

      <van-tabs v-model:active="num">
        <van-tab v-for="item in active1" :key="item" :title="item">
          <van-card
            v-for="value in activelist1"
            :key="value.id"
            :desc="value.desc"
            :title="value.name + value.position"
            :thumb="value.image"
            @click="getDoctorInfo(value.id)"
          />
        </van-tab>
      </van-tabs>
      <div>医说</div>
      <van-card
        v-for="value in activelist2"
        :key="value.id"
        :desc="value.desc"
        :title="value.name"
        :thumb="value.image"
        @click="jumpDetails(value.id)"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  height: 0.44rem;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
}
.content {
  overflow: auto;
}
.img_box {
  width: 90%;
  height: 2.05rem;
  border-radius: 0.15rem;
  overflow: hidden;
  margin: 0.1rem 0;
  margin-left: 5%;
  background-image: url("https://img2.baidu.com/it/u=2090467411,1159845975&fm=253&fmt=auto&app=138&f=JPEG?w=868&h=500");
  background-size: cover;
  position: relative;
  .van-button {
    background-color: rgb(165, 221, 243);
    border: none;
    border-radius: 0.22rem;
    font-size: 0.26rem;
    position: absolute;
    bottom: 0.1rem;
    left: 0.1rem;
    color: rgb(98, 190, 251);
    font-weight: 700;
  }
}
.textY {
  font-size: 0.2rem;
  font-weight: 700;
  margin: 0.05rem 0.2rem;
}
.van-search {
  flex: 1;
  background-color: #f7fdff;
}
.van-icon {
  width: 0.2rem;
  padding: 0 0.05rem;
}
.van-tag {
  font-weight: 700;
}
.van-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  height: 1rem;
  margin-bottom: 0.1rem;
}
.van-grid-item {
  flex-shrink: 0;
  background-color: #f7fdff;
  margin-right: 0.1rem;
}
</style>
